<template>
  <div>
    <h2>光交箱详情 - ID: {{ odf.id }}</h2>
    <p>位置: {{ odf.location }}</p>
    <div v-for="board in odf.boards" :key="board.id">
      <h3>光路板 - ID: {{ board.id }}</h3>
      <ul>
        <li v-for="port in board.interfaces" :key="port.id">
          光口 ID: {{ port.id }} - 状态: {{ port.status }}
          <button @click="connectInterface(port)">连接</button>
          <button @click="disconnectInterface(port)">断开</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getOdfDetails, connectInterfaces, disconnectInterfaces } from '@/services/api.js';

export default {
  props: {
    odfId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      odf: {},
    };
  },
  created() {
    this.fetchOdfDetails();
  },
  methods: {
    fetchOdfDetails() {
      getOdfDetails(this.odfId)
        .then(response => {
          this.odf = response.data;
        })
        .catch(error => {
          console.error('Error fetching ODF details:', error);
        });
    },
    connectInterface(port) {
      connectInterfaces({
        interface1_id: port.id,
        interface2_id: port.connected_interface_id, // Assuming you have another port ID to connect
      })
      .then(() => {
        alert('接口连接成功');
        this.fetchOdfDetails();
      })
      .catch(error => {
        console.error('Error connecting interfaces:', error);
      });
    },
    disconnectInterface(port) {
      disconnectInterfaces({
        interface_id: port.id,
      })
      .then(() => {
        alert('接口断开成功');
        this.fetchOdfDetails();
      })
      .catch(error => {
        console.error('Error disconnecting interfaces:', error);
      });
    },
  },
};
</script>
